<template>
  <div class="footer">
    <div class="navitems">
      <router-link 
        exact
        class="navitem hover-style" 
        v-for="item in navItems" 
        :key="item.id" 
        :to="item.path">
        <span class="icon" @click="handleClick(item.path)">
          <icon-svg :iconClass="$route.path == item.path ?  item.activeIcon : item.icon"></icon-svg>
          <!-- <svg class="svg" aria-hidden="true" >
            <use :xlink:href="'#'+ classNames(item.path, item.icon, item.activeIcon)"></use>
          </svg> -->
        </span>
        <!-- <span class="icon" v-show="currentPath == item.path">
          <svg class="svg" aria-hidden="true">
            <use :xlink:href="'#' + item.activeIcon"></use>
          </svg>
        </span> -->
        <span class="context">{{item.context}}</span>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navItems: [
        {
          id: 1,
          icon: 'iconnav_wap_shouye',
          activeIcon: 'iconnav_wap_shouye_y',
          context: '首页',
          path: '/home'
        },
        {
          id: 2,
          icon: 'iconnav_wap_goucai',
          activeIcon: 'iconnav_wap_goucai_y',
          context: '购彩',
          path: '/lotterys'
        },
        {
          id: 3,
          icon: 'iconnav_wap_dingdan',
          activeIcon: 'iconnav_wap_dingdan_y',
          context: '订单',
          path: '/orders'
        },
        {
          id: 4,
          icon: 'iconnav_wap_zhangbian',
          activeIcon: 'iconnav_wap_zhangbian_y',
          context: '账变',
          path: '/account-update'
        },
        {
          id: 5,
          icon: 'iconnav_wap_wo',
          activeIcon: 'iconnav_wap_wo_y',
          context: '我',
          path: '/me'
        },
      ],
    }
  },
  methods: {
    handleClick(path) {
      this.$nextTick(() => {
        this.currentPath = path 
      })
      console.log(this.currentPath)
    },
    classNames(path, icon, activeicon) {
      if (path == this.currentPath) {
        return activeicon
      } else 
      return icon
    }
  },
  watch: {
    '$route'() {
      let path = this.$route.path 
      this.currentPath = path
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @import '~@/assets/styles/mixins.styl'
  .footer 
    position fixed 
    left 0
    right 0
    bottom 0
    height 48px
    background #fff
    box-shadow 0px -5px 10px 0px rgba(0, 0, 0, 0.1), 0px 1px 0px 0px rgba($color-divide-line,1);
    @media screen and (min-width 750px) 
      display none
    .navitems
      display flex
      height 100%
      align-items center
      justify-content space-around
      .navitem 
        display flex 
        flex-direction column 
        align-items center
        box-sizing border-box 
        padding 5px 0
        &.router-link-active 
          .context 
            color $color-theme-red
        .icon 
          width 21px 
          height 21px
          border-radius 50% 
          text-align center
          extend-click()
          .svg 
            font-size 21px
        .context 
          color $color-sub-grey
          margin-top 5px
          extend-click()
</style> 